<div *ngIf="accounts.length > 0; else empty" class="select-user form-field" style="width: 100%;">
  <label class="zone-label" for="selectAccount">{{ "Select account" | translate }}</label>
  <mat-form-field style="width: 100%; margin-top:-10px">
    <mat-select
      [(value)]="accountSelected"
      [compareWith]="compareFn"
      [formControl]="accountCtl"
      id="selectAccount"
    >
      <mat-option>
        <ngx-mat-select-search
          [formControl]="accountFilterCtl"
          noEntriesFoundLabel="{{ 'No matching found' | translate }}"
          placeholderLabel="{{ 'Search' | translate }}"
        >
          <mat-icon ngxMatSelectSearchClear>close</mat-icon>
        </ngx-mat-select-search>
      </mat-option>
      <mat-optgroup
        *ngFor="let group of filteredUsersGroups | async"
        [disabled]="group.disabled"
        [label]="group.name"
      >
        <mat-option *ngFor="let account of group.accounts" [value]="account">
          {{ account.name }}{{ account.alias === account.username || account.alias.startsWith('@') ? '' : '(' + account.username + ')' }}
        </mat-option>
      </mat-optgroup>
    </mat-select>
    <span *ngIf="adDomain" [attr.aria-label]="'AD'" class="ad-domain" disabled matSuffix title="AD">
      @{{ adDomain }}
    </span>
  </mat-form-field>
  <mat-error *ngIf="accountCtl.hasError('required')">
    {{"Please choose a account"| translate}}
  </mat-error>
</div>

<ng-template #empty>
  <div class="not-account">{{'No account available'| translate }}</div>
</ng-template>

<div *ngIf="showManualUsernameInput" class="form-field">
  <label class="zone-label" style="margin-bottom: 0">{{ "Username" | translate }}</label>
  <mat-form-field class="input-field" floatLabel='never'>
    <input
      #username
      (focus)="onFocus()"
      (ngModelChange)="onUsernameChanges()"
      [(ngModel)]="manualAuthInfo.username"
      [matAutocomplete]="auto"
      [placeholder]="usernamePlaceholder"
      [readonly]="accountSelected.alias === '@USER'"
      autofocus
      matInput
      name="username"
    >
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let i of filteredOptions" [value]="i.username">
        {{i.username}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

<div *ngIf="accountSelected && !accountSelected?.has_secret && accountSelected.alias !== '@ANON'" class="form-field">
  <label class="zone-label" style="margin-bottom: 0; display: block">{{ "Password" | translate }}</label>
  <div>
    <mat-form-field class="input-field password" floatLabel='never' style="width: 70%">
      <input
        #password
        [(ngModel)]="manualAuthInfo.secret"
        [attr.cdkFocusInitial]="manualAuthInfo.username? true : null"
        [autocomplete]="hidePassword ? 'new-password' : 'off'"
        [type]="hidePassword ? 'password' : 'text'"
        autofocus
        matInput
        name="password"
      >
      <button
        (click)="hidePassword = !hidePassword"
        [attr.aria-label]="'Hide secret'"
        [attr.aria-pressed]="hidePassword"
        mat-icon-button
        matSuffix
      >
        <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
      </button>
    </mat-form-field>
    <mat-checkbox *ngIf="!rememberAuthDisabled" [(ngModel)]="manualAuthInfo.rememberAuth" class="remember-auth">
      {{ "Remember password" | translate }}
    </mat-checkbox>
  </div>
</div>



